export default function researchBlock({ list = [] }: any) {
  return (
    <div className="relative flex">
      <div className="relative left-[50%] ml-[-712px] flex w-[1424px] flex-col">
        <div className="font-weight mb-[10px] text-[32px] font-bold">探索你的世界</div>
        <div className="relative flex h-auto w-[1424px]">
          <div className="flex gap-[20px]">
            {list.map((item: any, index: number) => {
              return (
                <a
                  href={item.href}
                  key={index}
                  className="w-[400px]"
                  target="_blank"
                  rel="noreferrer"
                >
                  <img
                    className="swiper-item w-[400px] rounded-[10px]"
                    src={item.picPath}
                    alt="img"
                  />
                  <div className="mt-[10px] text-[24px] font-bold ">{item.explanation}</div>
                  <div className="my-[20px] text-[#686B73]">{item.title}</div>
                </a>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}
